<p style="margin-bottom: 0px">&nbsp;</p>
<nz-card>
    <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-row [nzGutter]="8">
            <nz-col nzMd="6" nzSm="24">
                <nz-form-item>
                    <nz-form-label nzFor="orderId">{{'orderId' | translate}}</nz-form-label>
                    <nz-form-control>
                        <input nz-input [(ngModel)]="q.orderId" name="orderId" id="orderId">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>  
            <nz-col nzMd="6" nzSm="24">
                <nz-form-item>                    
                    <nz-form-control>
                        <nz-range-picker name="cdate" [nzFormat]="dateFormat" [(ngModel)]="q.dateRange" (ngModelChange)="dateChange($event)"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </nz-col> 
            
            <nz-col nzMd="6" nzSm="24">
                <button nz-button type="button" [nzType]="'primary'" (click)="st.load(1, q)">{{'search' | translate}}</button>
            </nz-col>
        </nz-row>
    </form>
</nz-card>

<simple-table #st
  [columns]="columns"
  [data]="url"
  [ps]="ps"
  [extraParams]="q"
  [resReName]="{ total: 'data.total', list: 'data.rows'}"
  [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
  toTopInChange
  [showTotal]="true"
  [showPagination]="true"
  [showSizeChanger]="true"
  (checkboxChange)="checkboxChange($event)"> 
    <ng-template st-row="brand" let-item let-index="index">
        {{item.brand | brandEnPipe | uppercase}}
    </ng-template>  
</simple-table>
